<template>
	<view>
		<!-- 角标 -->
		<uni-badge 
		:text="number"
		type="success"
		size="normal"
		max-num="10"
		absolute="rightTop">
			<button @click="addNumber">我的消息</button>
		</uni-badge>
		
		<!-- 日历 -->
		<uni-calendar 
		ref="calendar"
		:startDate="startDate"
		:endDate="endDate"
		:lunar="true"
		:insert="false"
		@confirm="confirm"
		 />
		 <button @click="open">打开日历</button>
		 
		 <!-- 卡片 -->
		 <uni-card title="基础卡片" extra="额外信息">
		 	<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
		 </uni-card>
		 
		 <!-- 复杂卡片 -->
		 <uni-card 
		 title="今日新闻"
		 sub-title="新华社5月17日电,发表声明如下,菲方当局一再挑衅,我方决定自卫反击"
		 cover="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
		 	<text>这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
		 	<template v-slot:actions>
		 		<view class="card-actions">
		 			<view class="card-actions-item" @click="actionsClick('分享')">
		 				<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
		 				<text class="card-actions-item-text">分享</text>
		 			</view>
		 			<view class="card-actions-item" @click="actionsClick('点赞')">
		 				<uni-icons type="heart" size="18" color="#999"></uni-icons>
		 				<text class="card-actions-item-text">点赞</text>
		 			</view>
		 			<view class="card-actions-item" @click="actionsClick('评论')">
		 				<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
		 				<text class="card-actions-item-text">评论</text>
		 			</view>
		 		</view>
		 	</template>
		 </uni-card>
		 
		 
		 <!-- 倒计时一般用法 -->
		 <uni-countdown 
		 backgroundColor="#cc6239"
		 color="#ffffff"
		 :day="0" 
		 :hour="0" 
		 :minute="0" 
		 :second="5"
		 @timeup="timeup"></uni-countdown>
		
		<!-- 占位 -->
		<view style="width: 100%;height: 300px;"></view>
		 <!-- 写一个禁止点击的按钮 -->
		 <!-- <button :disabled="pay" @click="paymoney">
			{{ btnMsg }}
		</button> -->

		<!-- 商品导航栏 -->
		<view class="goods-carts">
			<uni-goods-nav 
			:fill="true" 
			:options="options" 
			:button-group="customButtonGroup1" 
			@click="onClick"
			@buttonClick="buttonClick"/>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			//获取当前系统时间作为开始时间 格式 yyyy-MM-dd
			this.startDate = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate();
			//获取当前系统时间未来7天作为结束时间 格式 yyyy-MM-dd
			this.endDate = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+(new Date().getDate()+7);
		},
		data() {
			return {
				//时间控制 单位毫秒
				timeend:1000,
				paycode:1,
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				customButtonGroup1: [{
					text: '活动未到时间',
					//灰色背景
					backgroundColor: '#f5f5f5',
					color: '#999'
				}],
				number:1,
				//开始时间和结束时间
				startDate:'',
				endDate:'',
				pay:true,
				btnMsg:'秒杀活动还未开始'
			}
		},
		methods: {
			addNumber(){
				this.number++;
			},
			open(){
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			},
			timeup(){
				this.paycode = 2;
				this.pay = false;
				this.btnMsg = '立即支付';
				this.customButtonGroup1=[{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}]
				//做一个练手速的模拟
				setTimeout(()=>{
					this.pay = true;
					this.paycode = 3;
					this.customButtonGroup1=[{
						text: '卖完了',
						//灰色背景
						backgroundColor: '#f5f5f5',
						color: '#999'
					}]
				},this.timeend)
			},
			//右侧按钮点击事件
			buttonClick(e){
				if(this.paycode == 1){
					//提示还没到时间
					uni.showToast({
						title:'活动还未开始',
						icon:'none'
					})
				}else if(this.paycode == 2){
					//弹出一个点确定的框
					uni.showModal({
						title:'系统提示',
						content:'手速记录'+this.timeend+"毫秒",
						success:res=>{
							
						}
					})
				}else if(this.paycode == 3){
					//提示还没到时间
					uni.showToast({
						title:'已经结束',
						icon:'none'
					})
				}
			},
			paymoney(){
				//弹框提升支付成功
				uni.showToast({
					title:'支付成功',
					icon:'none'
				})
				this.pay = true;
				var i = 500;
				var timer = setInterval(()=>{
					//i随机减少数量 1-5 
					i = i - Math.floor(Math.random()*5);
					this.btnMsg = '已支付剩余库存'+i+'件';
					if(i<=0){
						clearInterval(timer);
						this.btnMsg = '秒杀活动已结束';
					}
				},100);
			}
		}
	}
</script>

<style>
.container {
	overflow: hidden;
}

.custom-cover {
	flex: 1;
	flex-direction: row;
	position: relative;
}

.cover-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	background-color: rgba($color: #000000, $alpha: 0.4);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 15px;
	font-size: 14px;
	color: #fff;
}

.card-actions {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 45px;
	border-top: 1px #eee solid;
}
.card-actions-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.card-actions-item-text {
	font-size: 12px;
	color: #666;
	margin-left: 5px;
}
.cover-image {
	flex: 1;
	height: 150px;
}
.no-border {
	border-width: 0;
}
.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
